<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script type="text/javascript">
			$(function (){
				//全局变量，保存选中行数
				var currentEditIndex;
				$("#grid").datagrid({
					columns : [[
						{
							field:'id',
							title:'编号',
							width:100,
							editor:{
								type:'validatebox',
								options:{
									required:true
								}
							}
						},
						{
							field:'name',
							title:'商品名称',
							width:200,
							editor:{
								type:'validatebox',
								options:{
									required:true
								}
							}
						},
						{
							field:'price',
							title:'商品价格',
							width:200,
							editor:{
								type:'validatebox',
								options:{
									required:true
								}
							}
						}
					]],
					toolbar:[
						{
							id: 'add',
							text:'添加',
							iconCls:'icon-add',
							handler:function() {
								$('#grid').datagrid('insertRow', {
									index:0,
									row:{}//空对象
								});
								//开启编辑状态
								$("#grid").datagrid('beginEdit', 0);
								//保存全局变量
								currentEditIndex = 0;
							}
						},
						{
							id: 'edit',
							text:'编辑',
							iconCls:'icon-add',
							handler:function() {
								if (currentEditIndex != undefined) {
									//正在录入
									return;
								}
								//获取选中的行
								var row = $("#grid").datagrid('getSelected');
								//获取行对象
								var index = $("#grid").datagrid('getRowIndex', row);
								$("#grid").datagrid('beginEdit', index);
								//保存全局变量
								currentEditIndex = index;
								//编辑第一行
								//$("#grid").datagrid('beginEdit', 0);//0指第一行
							}
						},
						{
							id: 'save',
							text:'保存',
							iconCls:'icon-save',
							handler:function() {
								//保存编辑效果
								$("#grid").datagrid('endEdit', currentEditIndex);
								//重置
								//currentEditIndex = undefined;
							}
						},
						{
							id: 'cancel',
							text:'取消',
							iconCls:'icon-cancel',
							handler:function() {
								//保存编辑效果
								$("#grid").datagrid('cancelEdit', currentEditIndex);
								//currentEditIndex = undefined;
							}
						}
					],
					 url:'product.json',
					 singleSelect:true,
					 //保存成功后才会触发
					 onAfterEdit:function(rowIndex, rowData, changes) {
					 	alert('afterEdit');
					 	currentEditIndex = undefined;
					 },
					 onCancelEdit:function(rowIndex,rowData) {
					 	currentEditIndex = undefined;
					 }
				});
			});
		</script>
	</head>
	<body>
		<table id="grid"></table>
	</body>
</html>
